<!-- <!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
      .bd{
        background:#BDCEEF;width:301px;height:101px;margin:10px;position:relative;
        -webkit-box-shadow: 5px 8px 11px rgba(0,0,0,0.4);
        -moz-box-shadow: 5px 8px 11px rgba(0,0,0,0.4);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
      }

      .bd .cor{
        position:absolute;
        left:20px;bottom:-40px;
        width:0;height:0;font-size:0;line-height:0;overflow:hidden;
        border-color:#BDCEEF transparent transparent #BDCEEF;
          border-style:solid dashed dashed solid;
          border-width:20px 20px 20px 20px;

      }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
      var socket = io();
      $('form').submit(function(){
         socket.emit('chat message', $('#m').val());
         $('#m').val('');
         return false;
       });
      socket.on('chat message', function(msg){
          $('#messages').append($('<li class="bd">').text(msg));
          $('.bd').append($('<span class="cor">'));
      });
    </script>
  </body>
</html> -->
<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>JUST CHAT</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 120px; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
      .bd{
        background:#BDCEEF;width:301px;height:101px;margin:10px;position:relative;
        -webkit-box-shadow: 5px 8px 11px rgba(0,0,0,0.4);
        -moz-box-shadow: 5px 8px 11px rgba(0,0,0,0.4);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
      }

      .bd .cor{
        position:absolute;
        left:20px;bottom:-40px;
        width:0;height:0;font-size:0;line-height:0;overflow:hidden;
        border-color:#BDCEEF transparent transparent #BDCEEF;
          border-style:solid dashed dashed solid;
          border-width:20px 20px 20px 20px;

      }
      .count{
        background: #666; padding: 3px; position: fixed; bottom: 80px; width: 100%;
      }
      @import 'http://fonts.googleapis.com/css?family=Noto+Sans';
      body {
        padding: 0;
        margin: 0;
        background: -moz-linear-gradient(-45deg, #183850 0, #183850 25%, #192c46 50%, #22254c 75%, #22254c 100%);
        background: -webkit-linear-gradient(-45deg, #183850 0, #183850 25%, #192c46 50%, #22254c 75%, #22254c 100%);
        background-repeat: no-repeat;
        background-attachment: fixed;
      }

      ::-webkit-scrollbar {
        width: 10px;
      }

      ::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color: rgba(25, 147, 147, 0.1);
      }

      ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: rgba(25, 147, 147, 0.2);
      }

      .chat-thread {
        margin: 24px auto 0 auto;
        padding: 0 20px 0 0;
        list-style: none;
        overflow-y: scroll;
        overflow-x: hidden;
      }

      .chat-thread li {
        position: relative;
        clear: both;
        display: inline-block;
        padding: 16px 40px 16px 20px;
        margin: 0 0 20px 0;
        font: 16px/20px 'Noto Sans', sans-serif;
        border-radius: 10px;
        background-color: rgba(25, 147, 147, 0.2);
      }

      /* Chat - Avatar */
      .chat-thread li:before {
        position: absolute;
        top: 0;
        width: 50px;
        height: 50px;
        border-radius: 50px;
        content: '';
      }

      /* Chat - Speech Bubble Arrow */
      .chat-thread li:after {
        position: absolute;
        top: 15px;
        content: '';
        width: 0;
        height: 0;
        border-top: 15px solid rgba(25, 147, 147, 0.2);
      }

      .chat-thread li.myMsg {
        animation: show-chat-odd 0.15s 1 ease-in;
        -moz-animation: show-chat-odd 0.15s 1 ease-in;
        -webkit-animation: show-chat-odd 0.15s 1 ease-in;
        float: right;
        margin-right: 80px;
        color: #0AD5C1;
      }

      /* .chat-thread li.myMsg:before {
        right: -80px;
        background-image: url();
      } */

      .chat-thread li.myMsg:after {
        border-right: 15px solid transparent;
        right: -15px;
      }

      .chat-thread li.otherMsg {
        animation: show-chat-even 0.15s 1 ease-in;
        -moz-animation: show-chat-even 0.15s 1 ease-in;
        -webkit-animation: show-chat-even 0.15s 1 ease-in;
        float: left;
        margin-left: 80px;
        color: #0EC879;
      }

      .chat-thread li.otherMsg:before {
        left: -80px;
        background-image: url('images/tom.jpg');
      }

      .chat-thread li.otherMsg:after {
        border-left: 15px solid transparent;
        left: -15px;
      }

      .chat-window {
        position: fixed;
        bottom: 18px;
      }

      .chat-window-message {
        width: 100%;
        height: 100%;
        font: 32px/48px 'Noto Sans', sans-serif;
        background: none;
        color: #0AD5C1;
        border: 0;
        border-bottom: 1px solid rgba(25, 147, 147, 0.2);
        outline: none;
      }

      span {
          color: #d2d2d2;
          margin-left: 20px;
          font-size: 12px;
      }

      /* Small screens */
      @media all and (max-width: 767px) {
        .chat-thread {
          width: 90%;
          height: 260px;
        }

        .chat-window {
          left: 5%;
          width: 90%;
        }
      }
      /* Medium and large screens */
      @media all and (min-width: 768px) {
        .chat-thread {
          width: 100%;
          height: 800px ;
        }

        .chat-window {
          left: 25%;
          width: 50%;
        }
      }
      @keyframes show-chat-even {
        0% {
          margin-left: -480px;
        }

        100% {
          margin-left: 0;
        }
      }
      @-moz-keyframes show-chat-even {
        0% {
          margin-left: -480px;
        }

        100% {
          margin-left: 0;
        }
      }
      @-webkit-keyframes show-chat-even {
        0% {
          margin-left: -480px;
        }

        100% {
          margin-left: 0;
        }
      }
      @keyframes show-chat-odd {
        0% {
          margin-right: -480px;
        }

        100% {
          margin-right: 0;
        }
      }
      @-moz-keyframes show-chat-odd {
        0% {
          margin-right: -480px;
        }

        100% {
          margin-right: 0;
        }
      }
      @-webkit-keyframes show-chat-odd {
        0% {
          margin-right: -480px;
        }

        100% {
          margin-right: 0;
        }
      }
      .credits{
        text-align:center;
        margin-top:35px;
        color: rgba(255, 255, 255, 0.35);
        font-family: 'Noto Sans', sans-serif;
      }
      .credits a{
        text-decoration:none;
        color: rgba(255, 255, 255, 0.35);
      }
    </style>
</head>

<body>
  <ul class="chat-thread"></ul>
  <form action="">
    <input id="m" autocomplete="off" /><button>Send</button>
  </form>
  <div class="count">
      <div class="newUser"><span id="user">TOM</span> inter the chat room!</div>
      <div class="userCount"><span id="num">3</span> person online.</div>
  </div>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="/socket.io/socket.io.js"></script>
  <script type="text/javascript">
    function GetQueryString(name)
    {
         var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
         var r = window.location.search.substr(1).match(reg);
         if(r!=null)return  unescape(r[2]); return null;
    }

    // 调用方法
    var username = GetQueryString("username");
    var userImg = GetQueryString("userImg");
  </script>
  <script>
      var socket = io();
      socket.emit('join',{
        username:username,
        userimg:userImg
      });

      //收到加入聊天室广播后，显示消息
      socket.on('broadcast_join', function (data) {
          console.log(data.onlineCount + ' person online');
          console.log(data.username + ' inter chat room');
          $('#user').text(data.username);
          $('#num').text(data.onlineCount);
      });
      $('form').submit(function(){
        $('head').append('<style>.chat-thread li.myMsg:before{right: -80px;background-image: url("images/'+userImg+'-face.jpg");}</style>');
         socket.emit('chat message', $('#m').val());
         $('.chat-thread').append($('<li class="myMsg">'+ $('#m').val() +'<span class="sendTime">'+ GetNowFormatDate() + '</span><span> FROM ME</span></li>'));
        /* $('.myMsg').html($('<span>'+ GetNowFormatDate() + '</span>'));*/
         $('.chat-thread').scrollTop( $('.chat-thread')[0].scrollHeight );
         $('#m').val('');
         return false;
       });
      socket.on('chatMsg', function(data){
          console.log(data);
          $('head').append('<style>.chat-thread li.otherMsg:before{right: -80px;background-image: url("images/'+data.userimg+'-face.jpg");}</style>');
          /*$('.chat-thread').append($('<li class="otherMsg">').text(data.content));*/
          $('.chat-thread').append($('<li class="otherMsg">'+ data.content +'<span class="sendTime">'+ GetNowFormatDate() + '</span><span> FROM '+ data.username +'</span></li>'));
         /* $('.otherMsg').append($('<span>').text(data.username));*/
          $('.chat-thread').scrollTop( $('.chat-thread')[0].scrollHeight );
      });

      function GetNowFormatDate() {
          var date = new Date();
          var seperator1 = "-";
          var seperator2 = ":";
          var month = date.getMonth() + 1;
          var strDate = date.getDate();
          if (month >= 1 && month <= 9) {
              month = "0" + month;
          }
          if (strDate >= 0 && strDate <= 9) {
              strDate = "0" + strDate;
          }
          var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                  + " " + date.getHours() + seperator2 + date.getMinutes()
                  + seperator2 + date.getSeconds();
          return currentdate;
      }
    </script>
</body>

</html>
